/*
 * @Author: xiaosihan 
 * @Date: 2024-11-29 23:34:37 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-12-02 06:47:06
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./goodsModal.module.less";
import img1 from '@/assets/img/1.png';
import img2 from '@/assets/img/2.png';
import img3 from '@/assets/img/3.png';
import img4 from '@/assets/img/4.png';
import img5 from '@/assets/img/5.png';
import { Collapse, Modal, Select, Pagination } from "antd";
import goodsModalStore from "./goodsModalStore";
import { color } from "framer-motion";
import utils from "@/utils/utils";
import clsx from "clsx";
import setEditorDate from "@/pages/editor/setEditorDate";

const { Panel } = Collapse;
interface Iprops {
}
// 商品弹窗
export default function GoodsModal() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [data, setData] = useState({});
  const [open, setOpen] = useState(goodsModalStore.open);

  const [category, setCategory] = useState(goodsModalStore.category);
  const [activeCategory, setActiveCategory] = useState(goodsModalStore.activeCategory);

  const [activeGoodsGroup, setActiveGoodsGroup] = useState(goodsModalStore.activeGoodsGroup);
  const [goodsGroup, setGoodsGroup] = useState(goodsModalStore.goodsGroup);

  const [sizes, setSizes] = useState(goodsModalStore.sizes);
  const [activeSize, setActiveSize] = useState(goodsModalStore.activeSize);
  const [materials, setMaterials] = useState(goodsModalStore.materials);
  const [activeMaterial, setActiveMaterial] = useState(goodsModalStore.activeMaterial);
  const [colors, setColors] = useState(goodsModalStore.colors);
  const [activeColor, setActiveColor] = useState(goodsModalStore.activeColor);

  const [activeGoodsId, setActiveGoodsId] = useState(goodsModalStore.activeGoodsId);
  const [goodsDatas, setGoodsDatas] = useState(goodsModalStore.goodsDatas);

  const [pageNo, setPageNo] = useState(goodsModalStore.pageNo);
  const [total, setTotal] = useState(goodsModalStore.total);

  const imgMap: any = {
    1: img1,
    2: img2,
    3: img4,
    4: img3,
    5: img5,
  };

  useEffect(() => {

  }, []);

  useEffect(() => autorun(() => {
    setOpen(goodsModalStore.open);
    setCategory(goodsModalStore.category);
    setActiveCategory(goodsModalStore.activeCategory);
    setActiveGoodsGroup(goodsModalStore.activeGoodsGroup);
    setGoodsGroup(goodsModalStore.goodsGroup);
    setSizes(goodsModalStore.sizes);
    setActiveSize(goodsModalStore.activeSize);
    setMaterials(goodsModalStore.materials);
    setActiveMaterial(goodsModalStore.activeMaterial);
    setColors(goodsModalStore.colors);
    setActiveColor(goodsModalStore.activeColor);
    setActiveGoodsId(goodsModalStore.activeGoodsId);
    setGoodsDatas(goodsModalStore.goodsDatas);
    setPageNo(goodsModalStore.pageNo);
    setTotal(goodsModalStore.total);
  }, { delay: 10 }), []);

  return (
    <Modal
      open={open}
      centered={true}
      width={1000}
      onCancel={() => {
        goodsModalStore.setOpen(false)
      }}
      onOk={() => {
        goodsModalStore.setOpen(false);
        setEditorDate(activeGoodsId);
      }}
      okButtonProps={{
        disabled: !activeGoodsId
      }}
    >
      <div className={styles.goodsModal} >
        <div className={styles.left} >
          <Collapse collapsible="disabled" defaultActiveKey={1} ghost expandIconPosition="end">
            <Panel header="类别" key="1">
              <div className="flex flex-col gap-[10px]">
                {category.map((item: any) => {
                  return (
                    <div
                      className={['flex cursor-pointer gap-[10px]', activeCategory === item.value ? 'font-bold text-[#FD7901]' : '',].join(' ')}
                      onClick={() => {
                        goodsModalStore.setActiveCategory(item.value);
                      }}
                      key={item.value}
                    >
                      <img className="w-[20px]" src={imgMap[item.value]} alt="img" />
                      {item.name}
                    </div>
                  );
                })
                }
              </div>
            </Panel>
          </Collapse>
          <Collapse
            collapsible="disabled"
            defaultActiveKey={1}
            ghost
            expandIconPosition="end"
          >
            <Panel header="产品" key={1}>
              {goodsGroup.map((item: any) => {
                return (
                  <Collapse key={item.id} ghost expandIconPosition="end">
                    <Panel header={item.name} key={item.id}>
                      <div className="flex flex-col gap-[10px]">
                        {item.sonList.map((sub: any) => {
                          return (
                            <div
                              onClick={() => {
                                goodsModalStore.setSctiveGoodsGroup(sub.id);
                              }}
                              key={sub.id}
                              className={['flex cursor-pointer flex-col gap-[10px]', activeGoodsGroup === sub.id ? 'font-weight text-[#FD7901]' : '',].join(' ')}
                            >
                              &nbsp;&nbsp;&nbsp;&nbsp;{sub.name}
                            </div>
                          );
                        })}
                      </div>
                    </Panel>
                  </Collapse>
                );
              })}
            </Panel>
          </Collapse>
        </div>
        <div className={styles.right} >
          <div className={styles.filter} >
            <Select
              style={{ width: '100px' }}
              placeholder="尺码"
              value={activeSize}
              onChange={s => {
                goodsModalStore.setActiveSize(s);
              }}
              options={
                [{ label: '全部尺码', value: '', }].concat(
                  sizes.map((item: string) => ({
                    label: item,
                    value: item,
                  }))
                )
              }
            />
            <Select
              style={{ width: '100px' }}
              placeholder="颜色"
              value={activeColor}
              onChange={c => {
                goodsModalStore.setActiveColor(c);
              }}
              options={
                [{ label: '全部颜色', value: '', }].concat(
                  colors.map((item: string) => ({
                    label: item,
                    value: item,
                  })))
              }
            />
            <Select
              style={{ width: '100px' }}
              placeholder="材质"
              value={activeMaterial}
              onChange={m => {
                goodsModalStore.setActiveMaterial(m);
              }}
              options={
                [{ label: '全部材质', value: '', }].concat(
                  materials.map((item: string) => ({
                    label: item,
                    value: item,
                  })))
              }
            />
            <Pagination
              size="small"
              className={styles.pagination}
              current={pageNo}
              pageSize={12}
              total={total}
              onChange={(pageNo) => {
                goodsModalStore.getGoodsData(pageNo);
              }}
            />
          </div>
          <div className={styles.goodsList} >
            {
              goodsDatas.map((goodsData, i) => {
                return (
                  <div
                    key={i}
                    className={clsx(styles.goodsItem, activeGoodsId === goodsData.id && styles.active)}
                    onClick={() => {
                      goodsModalStore.setActiveGoodsId(goodsData.id);
                    }}
                  >
                    <img
                      className={styles.img}
                      src={utils.ossSuffix(goodsData.thumbs[0], 150)}
                      alt=""
                    />
                    <p className={styles.name} >{goodsData.name}</p>
                  </div>
                );
              })
            }
          </div>
        </div>
      </div>
    </Modal>
  );

}